<div class="box mb-10">
  <div class="row">
    {{#if (and editing (gt alertRules.length 1))}}
      <div class="pull-right">
        {{#if (and (gt alertRules.length 1 ) isCreate)}}
          <button class="btn bg-transparent text-small vertical-middle" type="button" {{action removeRule model}}>
            {{t "alertPage.newOrEdit.removeAlert"}}
          </button>
        {{/if}}
      </div>
    {{else}}
      <!-- 28px is the height of the button, no jumpy -->
      <div style="height: 28px;"></div>
    {{/if}}
  </div>

  <div class="row">
    <div class="col span-1 text-right">
      <div class="pt-10">
        <label>
          {{t "formNameDescription.name.label"}}
        </label>
      </div>
    </div>
    <div class="col span-10">
      {{input
        type="text"
        value=model.name
        placeholder=(t "formNameDescription.name.placeholder")
      }}
    </div>
  </div>

  <section class="row">
    <div class="col span-1">
      <div class="text-right pt-10">
        <label>
          {{#if (eq model._targetType "metric")}}
            {{t "alertPage.newOrEdit.whenAn"}}
          {{else}}
            {{t "alertPage.newOrEdit.whenA"}}
          {{/if}}
        </label>
      </div>
    </div>

    <div class="col span-10">
      <div class="row">
        <div class="col span-3">
          <label>
            {{radio-button
              selection=model._targetType
              value="pod"
            }}
            {{t "alertPage.targetTypes.pod"}}
          </label>
        </div>
        <div class="col span-8 mt-0">
          {{searchable-select
            content=pods
            class="form-control"
            value=model.podRule.podId
            optionValuePath="id"
            optionLabelPath="displayName"
            placeholder=(t "alertPage.newOrEdit.podPlaceholder")
            readOnly=(not-eq model._targetType "pod")
          }}
        </div>
      </div>

      <div class="row">
        <div class="col span-3">
          <label>
            {{radio-button
              selection=model._targetType
              value="workload"
            }}
            {{t "alertPage.targetTypes.workload"}}
          </label>
        </div>
        <div class="col span-8 mt-0">
          {{searchable-select
            content=workloads
            class="form-control"
            value=model.workloadRule.workloadId
            optionValuePath="id"
            optionLabelPath="displayName"
            placeholder=(t "alertPage.newOrEdit.resourcePlaceholder")
            readOnly=(not-eq model._targetType "workload")
          }}
        </div>
      </div>

      <div class="row">
        <div class="col span-3">
          <label>
            {{radio-button
              selection=model._targetType
              value="workloadSelector"
            }}
            {{t "alertPage.targetTypes.workloadSelector"}}
          </label>
        </div>
        <div class="col span-8 mt-0">
          {{#if (eq model._targetType "workloadSelector")}}
            {{form-key-value
              addActionLabel="alertPage.addSelectorLabel"
              initialMap=model.workloadRule.selector
              changed=(action (mut model.workloadRule.selector))
            }}
          {{else}}
            <button style="cursor:not-allowed;" class="btn bg-disabled icon-btn" type="button" {{action "noop"}}>
              <i class="icon icon-plus text-small"/>
              <span>
                {{t "alertPage.addSelectorLabel"}}
              </span>
            </button>
          {{/if}}
        </div>

      </div>

      <div class="row">
        <div class="col span-3">
          <label style={{expressionStyle}}>
            {{radio-button
              selection=model._targetType
              value="metric"
              disabled=(not monitoringEnabled)
            }}
            {{t "alertPage.newOrEdit.expression.label"}}
          </label>
        </div>
        <div class="col span-8 mt-0">
          {{alert-select
            content=metricsContent
            class="form-control"
            value=model.metricRule.expression
            readOnly=(or (not-eq model._targetType "metric") graphLoading)
            placeholder="Select a metric"
            allowCustom=true
          }}
          {{#if (eq graphStatus "noData")}}
            <p class="text-muted text-small mt-0 mb-0">
              {{t "alertPage.newOrEdit.expression.noData"}}
            </p>
          {{else if (eq graphStatus "error")}}
            <p class="text-error text-small mt-0 mb-0">
              {{t "alertPage.newOrEdit.expression.error"}}
            </p>
          {{/if}}
        </div>
      </div>
    </div>
  </section>

  <hr/>

  <section class="row">
    <div class="col span-1 text-right">
      <div style={{verbStyles}}>
        {{t "alertPage.newOrEdit.is"}}
      </div>
    </div>
    {{#if (eq model._targetType "metric")}}
      {{alert/form-comparison-row
        model=model
      }}
      {{#if (eq graphStatus "success")}}
        <hr/>
        <div class="row">
          {{alert-chart
            key=model.id
            series=chartOption.series
            loading=graphLoading
            threshold=model.metricRule.thresholdValue
            tag=model.tag
          }}
        </div>
      {{/if}}
    {{else}}
      <div class="col span-10">
        {{#if (eq model._targetType "pod")}}
          <label class="mr-10">
            {{radio-button
              selection=model.podRule.condition
              value="notrunning"
            }}
            {{t "alertPage.newOrEdit.notRunning"}}
          </label>
          <label class="mr-10">
            {{radio-button
              selection=model.podRule.condition
              value="notscheduled"
            }}
            {{t "alertPage.newOrEdit.notScheduled"}}
          </label>
          <label>
            {{radio-button
              selection=model.podRule.condition
              value="restarts"
            }}
            {{t "alertPage.newOrEdit.restarted"}}
          </label>
          <div style="display:inline-block;width:80px;">
            {{input-integer
              classNames="form-contorl input-sm"
              disabled=(not-eq model.podRule.condition "restarts")
              placeholder="3"
              min=1
              value=model.podRule.restartTimes
            }}
          </div>
          {{t "alertPage.newOrEdit.restartedTimes"}}
          <div style="display:inline-block;width:80px;">
            {{input-integer
              classNames="form-contorl input-sm"
              disabled=(not-eq model.podRule.condition "restarts")
              placeholder="5"
              min=1
              value=restartIntervalSeconds
            }}
          </div>
          {{t "alertPage.newOrEdit.minutes"}}
        {{else if (or (eq model._targetType "workload") (eq model._targetType "workloadSelector"))}}
          <div class="row">
            <div class="col span-1 mt-0">
              <div style={{verbStyles}}>
                {{t "alertPage.newOrEdit.lessThan"}}
              </div>
            </div>
            <div class="col span-6 mt-0">
              <div class="input-group">
                {{input-slider
                  value=model.workloadRule.availablePercentage
                  valueMin=0
                  valueMax=100
                  step=1
                }}
                <span class="input-group-addon">
                  {{model.workloadRule.availablePercentage}}% {{t "alertPage.newOrEdit.available"}}
                </span>
              </div>
            </div>
          </div>
        {{else}}
          <div>
            {{t "alertPage.newOrEdit.moreTarget"}}
          </div>
        {{/if}}
      </div>
    {{/if}}
  </section>

  <hr>
  <section class="row">
    <div class="col span-1 text-right">
      {{t "alertPage.newOrEdit.sendA"}}
    </div>
    <div class="col span-10">
      <label class="mr-10">
        {{radio-button
          selection=model.severity
          value="critical"}}
          {{t "alertPage.newOrEdit.critical"}}
        </label>
      <label class="mr-10">
        {{radio-button
          selection=model.severity
          value="warning"
        }}
        {{t "alertPage.newOrEdit.warning"}}
      </label>
      <label class="mr-10">
        {{radio-button
          selection=model.severity
          value="info"
        }}
        {{t "alertPage.newOrEdit.info"}}
      </label>
    </div>
    {{#if (and (eq mode "new") (eq level "group"))}}
      {{#advanced-section
        advanced=advanced
      }}
        <div class="row">
          <div class="col span-10 offset-1">
            {{alert/form-row-advanced
              model=model
              alertGroup=alertGroup
              level="rule"
              customClass="box"
            }}
          </div>
        </div>
      {{/advanced-section}}
    {{/if}}
  </section>

  {{#if (and (eq mode "edit") (eq level "group"))}}
    <hr/>
    <div class="row">
      <div class="col span-10 offset-1">
        {{#unless showAdvancedSection}}
          <label class="acc-label mt-20">
            {{t "alertPage.newOrEdit.inherited.label"}}
          </label>
          <div>
            {{#if model.inherited}}
              {{t "generic.enabled"}}
            {{else}}
              {{t "generic.disabled"}}
            {{/if}}
            <button class="btn bg-transparent text-small p-0" type="button" {{action "showAdvanced"}}>
              <i class="icon icon-edit"/>
            </button>
          </div>
        {{else}}
          {{alert/form-row-advanced
            model=model
            alertGroup=alertGroup
          }}
        {{/unless}}
      </div>
    </div>
  {{/if}}
</div>

{{#if (eq level "rule")}}
  {{alert/form-advanced
    model=model
    alertGroup=alertGroup
    level=level
  }}
{{/if}}